<template>
        <div>


<el-container class="container">
   <el-header class="header">
    <!-- 头部 -->
    <el-row>
  <el-col :span="2"><div class="grid-content bg-purple"><img src="http://www.qiqitv.top/uploadfile/image/20200323/20200323205342_33295.png" style="width:80px;height:60px"></div></el-col>
  <el-col :span="4" class="middle"><h3>奇奇管理系统</h3></el-col>
  <el-col :span="8" class="right"><div class="grid-content bg-purple">
    <!-- ------- -->
    <el-popover
  placement="top"
  width="150px">
  <div style="text-align: center; margin: 0">
    <el-button size="mini" type="text" @click="edit">编辑</el-button>
    <br>
    <el-button type="text" size="mini" @click="logout">退出</el-button>
  </div>
  <el-button slot="reference">{{username}}</el-button>
</el-popover>
    <!-- ___________ -->
  </div></el-col>
</el-row>
   </el-header>
  <el-container>
    <el-aside width="200px" class="aside">
        <!-- 侧边栏导航 -->
      <el-menu :unique-opened="true" :router="true" style="background-color:transparent;">
        <!-- 第一份 -->
      <el-submenu :index="''+index" v-for="(item1,index) in role_list" :key="index">
        <template slot="title">
          <i class="el-icon-pie-chart"></i>
          <span>{{item1.title}}</span>
        </template>
          <el-menu-item :index="item2.url" v-for="(item2,index) in item1.children" :key="index">
          <span>{{item2.title}}</span>
          </el-menu-item>
         
         </el-submenu>
         <!-- 第二份 -->
        <!--   <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-s-order"></i>
          <span>运单</span>
        </template>
          <el-menu-item index="1-1">
          <span>运单信息</span>
          </el-menu-item>
           <el-menu-item index="1-1">
          <span>添加运单</span>
          </el-menu-item>
           <el-menu-item index="1-1">
          <span>客户信息</span>
          </el-menu-item>
           <el-menu-item index="1-1">
          <span>添加客户</span>
          </el-menu-item>
         </el-submenu> -->
         <!-- 第三份 -->
         <!--  <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-s-grid"></i>
          <span>设备</span>
        </template>
          <el-menu-item index="tag_info">
          <span>标签信息</span>
          </el-menu-item>
          <el-menu-item index="add_tag">
          <span>添加标签</span>
          </el-menu-item>
          <el-menu-item index="1-1">
          <span>网关信息</span>
          </el-menu-item>
          <el-menu-item index="1-1">
          <span>添加网关</span>
          </el-menu-item>
          <el-menu-item index="type_info">
          <span>货物类型</span>
          </el-menu-item>
          <el-menu-item index="add_type">
          <span>添加货物类型</span>
          </el-menu-item>
          <el-menu-item index="1-1">
          <span>查验校准报告</span>
          </el-menu-item>
         </el-submenu> -->
         <!-- 第四份 -->
       <!--    <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-s-custom"></i>
          <span>用户</span>
        </template>
          <el-menu-item index="user">
          <span>用户信息</span>
          </el-menu-item>
          <el-menu-item index="adduser">
          <span>添加用户</span>
          </el-menu-item>
          <el-menu-item index="commpany">
          <span>公司信息</span>
          </el-menu-item>
          <el-menu-item index="1-1">
          <span>操作记录</span>
          </el-menu-item>
         </el-submenu> -->
         <!-- 第五份 -->
         <!-- <el-submenu index="5">
        <template slot="title">
          <i class="el-icon-s-data"></i>
          <span>曲线分析</span>
        </template>
          <el-menu-item index="1-1">
          <span>多重曲线图</span>
          </el-menu-item>
          <el-menu-item index="1-1">
          <span>物流线路分析</span>
          </el-menu-item>
         </el-submenu> -->
         <!-- 第六份 -->
        <!--  <el-submenu index="6">
        <template slot="title">
          <i class="el-icon-s-opportunity"></i>
          <span>报警中心</span>
        </template>
          <el-menu-item index="1-1">
          <span>报警中心</span>
          </el-menu-item>
          <el-menu-item index="1-1">
          <span>报警设置</span>
          </el-menu-item>
         </el-submenu> -->
         <!-- 第七份 -->
        <!--  <el-submenu index="7">
        <template slot="title">
          <i class="el-icon-s-tools"></i>
          <span>设置</span>
        </template>
          <el-menu-item index="1-1">
          <span>参数设置</span>
          </el-menu-item>
         </el-submenu> -->
     
    </el-menu>
    </el-aside>
    <el-main class="main">
        <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
    
        </div>
    </template>
    
    <script>
    import {uall,peo,sale,buy,salebuy} from '../api/api'
        export default {
    
            data(){
                return {
                    username:'',
                    super_id:'',
                    role_id:'',
                    role_list:[]
                    
                }
            },
            //定义组建标签
            components:{
            },
            filters: {
     
　　},
            //自定义方法
            methods:{
              logout:function(){
                localStorage.clear();
                this.$router.push({ path: '/login' })



              },
              edit:function(){
                this.$router.push({ path: '/edit_user'})
              }

    
            },
            //钩子方法
            mounted:function(){
    
               this.username=localStorage.getItem('username')
               this.super_id=localStorage.getItem('super_id')
               this.role_id=localStorage.getItem('role_id')
               if(this.super_id==1){
                 uall().then(res=>{
                    this.role_list=res
                    
                  })


               }else {
                 if(this.role_id==0){
                  peo().then(res=>{
                    this.role_list=res
                    
                  })

                 }
                 if(this.role_id==1){
                  buy().then(res=>{
                    this.role_list=res
                    
                  })

                 }
                 if(this.role_id==2){
                  sale().then(res=>{
                    this.role_list=res
                    
                  })

                 }
                 if(this.role_id==3){
                  salebuy().then(res=>{
                    this.role_list=res
                    
                  })

                 }
                 if(this.role_id==4){
                  peo().then(res=>{
                    this.role_list=res
                    
                  })

                 }
               }

      
    
            },
            //监听属性
            watch:{
    
    
            },
            //计算属性
            computed:{
    
    
            }
    
    
    
        }
    
    
    </script>
    
    <style>
    .container{
        height:100%;

    }
    .header{
        background-color:#b3c0d1;

    }
    .aside{
        background-color:#d3dce6;
        height:100vh;

    }
    .main{
        background:#e9eef3;
        height:100vh;

    }
    .middle{
        text-aligin:center;
        margin-left:600px

    }

.right{
   padding-top:10px;
   padding-left:1250px
        

}
    
    </style>